<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <!-- <el-button type="danger" @click="handleAllDelete">批量删除</el-button> -->
      </div>
      <div>
        <el-table
          ref="table"
          border
          :data="menuList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="序号"> </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="{ row }">
              <el-tag type="danger" v-if="row.status === 0">隐藏</el-tag>
              <el-tag type="success" v-if="row.status === 1">显示</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="图标">
            <template slot-scope="{ row }">
              <el-popover placement="right" max-width="420" trigger="hover">
                <img
                  :src="row.icon"
                  alt=""
                  style="max-width: 200px; max-height: 200px"
                />
                <img
                  slot="reference"
                  :src="row.icon"
                  alt=""
                  style="width: 50px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序"> </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="{ row }">
              <el-button
                type="warning"
                plain
                size="mini"
                @click="handleStatus(row.id)"
                >显隐开关</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-edit"
                plain
                size="mini"
                @click="handleEdit(row)"
              >
                编辑
              </el-button>
              <!-- <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                size="mini"
                @click="handleDelete(row.id)"
                >删除</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <cus-pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="handleGetData"
      />
    </el-card>

    <!-- 删除 -->
    <DeleteComp
      :deleteDialogVisible.sync="deleteDialogVisible"
      @handleConfirmDel="handleConfirmDel"
    ></DeleteComp>

    <!-- 新增编辑 -->
    <AddEditComp
      :dialogVisible.sync="dialogVisible"
      :titleStatus="titleStatus"
      :editForm="rowData"
      @submitForm="handleSubmitForm"
    ></AddEditComp>
  </div>
</template>

<script>
import {
  getData,
  postData,
  postStatusData,
  postDeleteData
} from "@/api/interaction/changeVoice";

import AddEditComp from "../addEditComp/addEditComp";
import DeleteComp from "../deleteComp/deleteComp";

import { debounce } from "lodash";

export default {
  components: {
    AddEditComp,
    DeleteComp
  },
  data() {
    return {
      listQuery: {
        page: 1,
        per_page: 10
      },
      total: 0,
      menuList: [],
      multipleSelection: [],
      deleteDialogVisible: false,
      titleStatus: "add",
      dialogVisible: false,
      rowData: {}
    };
  },
  created() {
    this.handleGetData();
  },
  methods: {
    handleGetData() {
      getData(this.listQuery).then(res => {
        this.menuList = res.data.list;
        this.total = res.data.total;
      });
    },
    handleDelete(id) {
      this.ids = id.toString();
      this.deleteDialogVisible = true;
    },
    handleAllDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请勾选要删除的数据");
        return;
      } else {
        let arr = [];
        this.multipleSelection.forEach(item => {
          arr.push(item.id);
        });
        this.ids = arr.join(",");
      }
      this.deleteDialogVisible = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleConfirmDel() {
      postDeleteData(this.ids).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    handleAdd() {
      this.rowData = {};
      this.titleStatus = "add";
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.rowData = row;
      this.titleStatus = "edit";
      this.dialogVisible = true;
    },
    handleSubmitForm(form) {
      postData(form).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.dialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    },
    handleStatus: debounce(function(id) {
      postStatusData(id).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.dialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    }, 500)
  }
};
</script>

<style></style>
